<template>
	<view class="pg">
		<view class="order" v-for="(item, index) in orderInfo" :key = "index" @tap="todetail(index,item)">
			<view class="order_top">
				<view class="order_top_l">
					<view class="ordernum">订单编号：{{item.orderNum}}</view>
				</view>
				<view class="order_top_2">
					<image :src="Url+'mine/discount/refund.png'"></image>
					<view v-if="item.state == 0" class="orderstate">退款中</view>
					<view v-if="item.state == 1" class="orderstate">已退款</view>
					<view v-if="item.state == 2" class="orderstate">退款失败</view>
				</view>
			</view>
			<view class="orderinfo" >
				<view class="orderinfo_l">
					<view class="orderinfo_pic"><image :src="item.src" mode="widthFix"></image></view>
					<view class="orderinfo_info">
						<view class="title">{{item.title}}</view>
						<view class="standard">{{item.standard}};{{item.weight}}</view>
						<!-- 退款金额 -->
						<view class="refund_money"> 
							退款：
							<view class="price">
								￥
								<text>{{item.price}}</text>
							</view>
						</view>
					</view>
				</view>
				
				
			</view>
			
			<!-- 退款信息 -->
			<view class="refund_info">
				<view class="refund_info_0" v-if="item.state == 0">
					<view class="left_refund_info"> 待商家处理</view>
					<view class="right_refund_info"> 请耐心等待...</view>
				</view>
				<view class="refund_info_1" v-else-if="item.state == 1">
					<view class="left_refund_info"> 退款成功</view>
					<view class="right_refund_info"> 退款成功￥{{item.price}}元</view>
				</view>
				<view class="refund_info_2" v-else-if="item.state == 2">
					<view class="left_refund_info"> 退款失败</view>
					<view class="right_refund_info"> 商家拒绝您的退款</view>
				</view>
				
				
			</view>
			
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				Url:this.Imgurl,
				// type 订单类型 state 退款状态 standard 规格
					orderInfo: [
						{
							type: '1',
							integralnum: '1200',
							orderNum: 216467441,
							state: '0',
							src: '../../static/image/mine/discount/product01.png',
							title: '临潼石榴老树红石榴新鲜包邮应季甜水果3-10斤',
							standard: '70mm含-75mm',
							weight : '500g',
							price: '7.8',
							num: 2
						},
						{
							type: '2',
							integralnum: '1200',
							orderNum: 216467441,
							state: '1',
							src: '../../static/image/mine/discount/product02.png',
							title: '临潼石榴老树红石榴新鲜包邮应季甜水果3-10斤',
							standard: '70mm含-75mm',
							weight : '500g',
							price: '7.8',
							num: 2
						},
						{
							integralnum: '1200',
							orderNum: 216467441,
							state: '2',
							src: '../../static/image/mine/discount/product01.png',
							title: '临潼石榴老树红石榴新鲜包邮应季甜水果3-10斤',
							standard: '70mm含-75mm',
							weight : '500g',
							price: '7.8',
							num: 2
						},
						{	
							type: '2',
							integralnum: '1200',
							orderNum: 216467441,
							state: '2',
							src: '../../static/image/mine/discount/product02.png',
							title: '临潼石榴老树红石榴新鲜包邮应季甜水果3-10斤',
							standard: '70mm含-75mm',
							weight : '500g',
							price: '7.8',
							num: 2
						},
						{	
							type: '2',
							integralnum: '1200',
							orderNum: 216467441,
							state: '0',
							src: '../../static/image/mine/discount/product01.png',
							title: '临潼石榴老树红石榴新鲜包邮应季甜水果3-10斤',
							standard: '70mm含-75mm',
							weight : '500g',
							price: '7.8',
							num: 2
						},
						{
							integralnum: '1200',
							orderNum: 216467441,
							state: '1',
							src: '../../static/image/mine/discount/product02.png',
							title: '临潼石榴老树红石榴新鲜包邮应季甜水果3-10斤',
							standard: '70mm含-75mm',
							weight : '500g',
							price: '7.8',
							num: 2
						}
					]
			}
		},
		methods: {
			todetail (key,item) {
				// this.$emit('todetail', {key:key,content:item})
				// console.log(key)
				// console.log(item)
				var content = JSON.stringify(item)
				uni.navigateTo({
					url: '/pageD/afterSales/afterSalesDetail?id=' + key + '&content=' + content
				})
			},
			tologistics (key) {
				this.$emit('tologistics',key)
			}
		}
	}
</script>

<style lang="less" scoped>

.order {
	width: calc(100% - 60upx);
	margin: auto;
	margin-top: 20upx;
	padding: 25upx 15upx;
	box-sizing: border-box;
	background-color: #ffffff;
}
.order_top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	.order_top_l {
		display: flex;
		align-items: center;
		image {
			width: 72upx;
			height: 36upx;
			margin-right: 10upx;
		}
		.ordernum {
			font-size: 28upx;
			color: #333333;
		}
	}
	.order_top_2{
		display: flex;
		align-items: center;
		image{
			width: 38upx;
			height: 38upx;
			margin-right: 5upx;
		}
	}
	
	.orderstate {
		// color: #f73e2f;
		font-size: 28upx;
	}
}
.orderinfo {
	width: 100%;
	height: 160upx;
	margin-top: 25upx;
	display: flex;
	// align-items: center;
	justify-content: space-between;
	.orderinfo_l {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		.orderinfo_pic {
			width: 120upx;
			height: 120upx;
			border: 2upx solid #e1e1e1;
			border-radius: 20upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			image {
				width: 104upx;
				height: 104upx;
			}
		}
		.orderinfo_info {
			margin-left: 30upx;
			padding-top: 20upx;
			.title {
				// width: 350upx;
				font-size: 24upx;
				color: #333333;
				line-height: 40upx;
			}
			.standard {
				font-size: 24upx;
				color: #999;
				margin-top: 5upx;
			}
			.refund_money{
				font-size: 24upx;
				color: #333333;
				display: flex;
				justify-content: flex-start;
				margin-top: 10upx;
			}
		}
	}
	.orderinfo_r {
		.price {
			font-size: 24upx;
			color: #333333;
			
			text {
				font-size: 28upx;
				font-weight: bold;
			}
		}
		.num {
			font-size: 24upx;
			color: #999999;
			text-align: right;
		}
	}
}
.refund_info{
	background: #d1d1d1;
	margin: 20upx 10upx;
	margin-top: 40upx;
	font-size: 24upx;
	padding: 10upx 0;
	padding-left: 40upx;
	view[class^="refund_info_"] {
		display: flex;
	}
	.left_refund_info{
		color: #f70000;
		margin-right: 20upx;
	}
}


</style>
<style>
page {
	overflow: hidden;
	background-color: #f8f8f8;
	min-height: 100%;
}
</style>
